<template>
  <div class="wrap">
    <!-- 主内容区域 -->
    <div class="content">
      <!-- 左侧面板，包含工具栏和流程图画板 -->
      <div class="panel">
        <!-- 工具栏 -->
        <div class="toolbar">
          <tool-bar v-if="isReady" />
        </div>
        <!-- 流程图画板 -->
        <div id="container" class="x6-graph"></div>
      </div>
      <!-- 右侧配置面板 -->
      <div class="right-panel">
        <config-panel v-if="isReady" />
      </div>
      <!-- 底部配置工具栏 -->
      <div class="config bottom-config">
        <div id="stencil" class="sider"></div>
      </div>
    </div>
  </div>

  <!--  <div class="wrap">
    <div class="content">
      &lt;!&ndash; 左侧内容，包含工具栏和流程图画板 &ndash;&gt;
      <div class="panel">
        <div id="container" class="x6-graph"></div>
      </div>
    </div>
    &lt;!&ndash; 右侧配置面板 &ndash;&gt;
    <div class="right-panel">
      <config-panel v-if="isReady" />
    </div>
  </div>-->
</template>

<style lang="less" scoped>
  .panel {
    flex: 1;
  }

  .right-panel {
    width: 500px;
    border-left: 1px solid #ccc;
    padding: 10px;
  }

  /* 下方工具栏独立容器样式 */
  .bottom-toolbar-container {
    background-color: #ff0000;
  }

  .sider {
    flex: 100%;
    border-bottom: 10px solid #ccc;
  }
</style>

<script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  import './reset/reset.less';
  import './reset/global.css';
  import './index.less';
  import FlowGraph from './graph';
  import ToolBar from './components/ToolBar/index.vue';
  import ConfigPanel from './components/ConfigPanel/index.vue';
  // 获取容器大小
  const getContainerSize = () => {
    return {
      width: document.body.offsetWidth - 550,
      height: document.body.offsetHeight - 400,
    };
  };
  export default defineComponent({
    name: 'Index',
    components: {
      ToolBar,
      ConfigPanel,
    },
    setup() {
      // 是否初始化完成
      const isReady = ref(false);
      // 初始化流程图
      const initGraph = function (): Function {
        const graph = FlowGraph.init();
        isReady.value = true;
        // 监听窗口大小变化
        const resizeFn = () => {
          const { width, height } = getContainerSize();
          graph.resize(width, height);
        };
        resizeFn();
        window.addEventListener('resize', resizeFn);
        // 返回一个函数，用于在组件销毁时移除事件监听
        return () => {
          window.removeEventListener('resize', resizeFn);
        };
      };
      // 组件挂载时初始化流程图
      onMounted(() => {
        initGraph();
      });
      return {
        isReady,
      };
    },
  });
</script>

<style lang="less" scoped></style>
